<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>购物车的案例</title>
    <!-- <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script> -->
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      购物车
      <input type="checkbox" v-model="allcheck" @change="sumChange" />
      <button @click="deldata()">删除数据</button>
      <ul>
        <li v-for="(item, index) in datalist" :key="index">
          <!-- 双向绑定数组名称为checkeList :value动态绑定值为循环的item对象 -->
          <input
            type="checkbox"
            v-model="checkeList"
            :value="item"
            @change="lichanage"
          />{{item}}
          <input type="button" name="" value="减少" @click="sizedel(item)" />
          <input type="button" name="" value="增加" @click="sizeadd(item)" />
        </li>
      </ul>
      <p>总计金额为{{sumprice}}</p>
      <p>总计金额第二种方案为{{sumprice2()}}</p>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          msg: "hello world",
          datalist: [],
          checkeList: [],
          allcheck: false,
        },
        mounted() {
          this.datalist = [
            { prodname: "笔记本", price: 20, size: 10 },
            { prodname: "电脑", price: 2000, size: 63 },
            { prodname: "鼠标", price: 121, size: 23 },
            { prodname: "传感器", price: 283, size: 2445 },
            { prodname: "键盘", price: 20, size: 123 },
          ];
        },
        computed: {
          sumprice: function () {
            let sum = 0;
            for (item of this.checkeList) {
              sum += item.price * item.size;
            }
            return sum;
          },
        },
        methods: {
          deldata() {
            if (this.checkeList.length == 0) {
              alert("请选择商品");
            } else {
              //   this.checkeList.forEach((element) => {
              //     if (this.datalist.indexOf(element) > -1) {
              //       this.datalist = this.datalist.splice(element, 1);
              //       console.log(this.datalist);
              //     }
              //   });
              this.checkeList.forEach((element) => {
                this.datalist = this.datalist.filter((obj) => obj != element);
              });
              this.checkeList = [];
            }
          },
          lichanage() {
            // console.log("lichanage");
            if (this.datalist.length == this.checkeList.length) {
              this.allcheck = true;
            } else {
              this.allcheck = false;
            }
          },
          sizedel(data) {
            if (data.size == 1) {
              return;
            } else data.size--;
          },
          sizeadd(data) {
            data.size++;
          },
          sumChange() {
            if (this.allcheck) {
              this.checkeList = this.datalist;
            } else {
              this.checkeList = [];
            }
          },
          sumprice2() {
            let sum = 0;
            for (item of this.checkeList) {
              sum += item.price * item.size;
            }
            return sum;
          },
        },
      });
    </script>
  </body>
</html>
